<template>
	<view class="body" >
		<view class="list" >
			<view class="title">猜你喜欢</view>
			<view class="list-content" >
				
				<view class="list-item" v-for="(item,index) in tabList" :key="index" @click="storeList(item)" >
					
					<view v-if="item.is_advertising_store == 2" class="prompt" >
						<text v-if="item.subsidy_type == 'per'">补贴{{item.subsidy_point}}个点</text>
						<text v-else>补贴{{item.subsidy_point}}元</text>
					</view>
					<view class="prompt prompt-ad" v-if="item.is_advertising_store == '1' " >广告</view>
					<view v-else >
						<view class="prompt prompt-store" v-if="item.subsidy_point > 0" >
							<text>补贴{{item.subsidy_point}}个点</text>
						</view>
					</view>
					
					
					<image :src="item.store_log"  mode="aspectFill" ></image>
					<view class="name" >{{item.store_name}}</view>
					<view class="text1" >联系电话:<text>{{item.store_principal_phone}}</text></view>
					<view class="text1"  >地址:<text>{{item.address}}</text></view>
					<view class="detail" >
						<view class="title" >{{item.is_advertising_store == 1? '广告':'实体商家'}}</view>
						<view class="detail-btn" @click.stop="navToMap(item)">导航去商家</view>
					<view class="text1 text-address"  >地址:<text>{{item.address}}</text></view>
					<view class="detail" >
						
						<!-- 是否是广告店铺 1是 2否 -->
						<view class="title" >
							<text v-if="item.is_advertising_store != '1' " >实体商家</text>
						</view>
						<view class="detail-btn" @click.stop="navigation(item)" >导航去商家</view>
						
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			tabList:{
				type: Array
			}
		},
		watch:{
			tabList(newVal){
				console.log('取到新的数据',newVal)
			}
		},
		methods:{
			storeList(item){
				// uni.navigateTo({
				// 	url: '../pages/Store/storeGoods'
				// })
<<<<<<< HEAD
				this.$emit('clickStore',item)
			},
			navToMap(item){
				uni.openLocation({
				    latitude: Number(item.lat),
				    longitude:  Number(item.long),
					name:item.store_name,
					address:item.address,
				    success: function () {
				        console.log('success');
				    },
					fail:function(res){
						console.log('res',res)
					}
				});
			},
=======
				this.$emit('clickStore')
			},
			navigation(item){
				console.log('导航去商家')
				
				if(item.lat && item.long){
					// uni.getLocation({
					// 	success: res => {
					// 		console.log('location success', res)
					// 		uni.openLocation({
					// 			latitude: res.latitude,
					// 			longitude: res.longitude,
					// 			scale: 18
					// 		})
					// 	}
					// })
					uni.openLocation({
						latitude: item.lat,
						longitude: item.long,
						scale: 18
					})
				}
				
			}
>>>>>>> f9e729c7cf3475781c226fab1e85a98ee58bc846
		}
	}
	
</script>

<style lang="scss" scoped >
	
	page,.body{
		width: 100%;
		height: 100%;
	}
	
	.list{
		padding: 20rpx;
		
		padding-bottom: 160rpx;
		background-color: rgb(250,250,250);
		
		.title{
			margin-bottom: 16rpx;
			color: $uni-color-error;
			font-size: $uni-font-size-lg;
		}
		
		.list-content{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			
			// margin: 20rpx 0;
			
			font-size: $uni-font-size-base;
			
			.list-item{
				
				position: relative;
				
				padding: 18rpx;
				margin-bottom: 20rpx;
				width: 48%;
				
				border-radius: 10rpx;
				background-color: #FFFFFF;
				
				&:nth-child(2n+1){
					margin-right: 4%;
				}
				
				image{
				
					// overflow: hidden;
					
					padding-bottom: 8rpx;
					
					height: 380rpx;
					width: 100%;
				}
				
				.detail{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					
					.detail-btn{
						
						padding: 8rpx 10rpx;
						
						color: #FFFFFF;
						background-color: $uni-color-error;
						
					}
				}
				
				view{
					margin-bottom: 8rpx;
				}
				
				.text1{
					color: #666;
				}
				
				.text-address{
					
					overflow:hidden;
					width: 100%;
					word-break:break-all;
					display:-webkit-box;
					-webkit-line-clamp:1;
					-webkit-box-orient:vertical;
				}
			}
		}
		
		.prompt{
			position: absolute;
			top: 22rpx;
			left: 18rpx;
			z-index: 1;
			
			padding: 4rpx 10rpx;
			
			border-radius: 0 0 8rpx 0;
			font-size: 24rpx;
		
		}
		
		.prompt-store{
			// color: rgb(97,99,221);
			// background-color: rgb(239,243,250);
			
			color: $uni-color-error;
			background-color: rgb(252,222,88);
		}
		
		.prompt-ad{
			
			color: rgb(97,99,221);
			background-color: rgb(239,243,250);
		}
	}
	
</style>
